@prefix-card: ~'@{nameSpace}-card';

.@{prefix-card} {
  font-size: var(--design-font-size-base);
  .flex();
  flex-direction: column;
  color: var(--design-text-color-5);


  .@{prefix-card}-header {
    background-color: var(--design-bg-color-2);
    border-bottom: var(--design-border-color-2) solid var(--design-border-sm);
    padding: 16px;
  }

  .@{prefix-card}-header-default {
    min-height: 40px;
    padding: 0 16px;
    background-color: var(--design-bg-color-2);
    border-bottom: var(--design-border-color-2) solid var(--design-border-sm);
    .flex();
    .justify-between();
    .align-center();
  }

  .@{prefix-card}-footer {
    background-color: var(--design-bg-color-3);
    border-top: var(--design-border-color-2) solid var(--design-border-sm);
    padding: 16px;
  }

  .@{prefix-card}-body {
    background-color: var(--design-bg-color-3);
    padding: 16px;
    flex: 1;
  }

  .@{prefix-card}-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }

  .@{prefix-card}-status-default {
    background-color: var(--design-base-color);
  }

  .@{prefix-card}-status-success {
    background-color: var(--design-success-color);
  }

  .@{prefix-card}-status-error {
    background-color: var(--design-error-color);
  }

  .@{prefix-card}-status-warning {
    background-color: var(--design-warning-color);
  }
}

.@{prefix-card}-border-top {
  border-top: var(--design-border-color-2) solid var(--design-border-sm);
}

.@{prefix-card}-border-bottom {
  border-bottom: var(--design-border-color-2) solid var(--design-border-sm);
}

.@{prefix-card}-border-right {
  border-right: var(--design-border-color-2) solid var(--design-border-sm);
}

.@{prefix-card}-border-left {
  border-left: var(--design-border-color-2) solid var(--design-border-sm);
}